<template>
  <div>
    <el-card class="card">
      <el-scrollbar height="700px">
        <el-table
            :data="feedbacks"
            style="width: 100%"
            border
            stripe
            empty-text="暂无反馈"
        >
          <el-table-column prop="id" label="ID" width="100" />
          <el-table-column prop="username" label="用户" width="100" />
          <el-table-column prop="email" label="用户邮箱" width="180" />
          <el-table-column prop="subject" label="主题" width="100" />
          <el-table-column prop="content" label="内容" width="100" />
          <el-table-column prop="status" label="受理状态" width="100" >
            <template #default="scope">
              <el-link v-if="scope.row.status === true" type="success">已受理</el-link>
              <el-link v-else type="warning">未受理</el-link>
            </template>
          </el-table-column>
          <el-table-column label="反馈时间" width="180">
            <template #default="scope">
              {{ formatDate(scope.row.created_at) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default="{ row }">
              <el-button type="success" size="small" @click="handlerFeedback(row.id)">受理</el-button>
              <el-button type="danger" size="small" @click="deleteDialogVisible = true, deleteId = row.id">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>

      <el-dialog
          title="确认删除"
          v-model="deleteDialogVisible"
          width="30%"
      >
        <span>确定要删除该反馈吗？</span>
        <template #footer>
          <el-button @click="deleteDialogVisible = false">取消</el-button>
          <el-button type="danger" @click="confirmDelete">确定</el-button>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from "axios";

function formatDate(timestamp) {
  const date = new Date(timestamp);
  date.setHours(date.getHours() + 8); // 直接增加8小时
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
}
//反馈列表
const feedbacks = ref([]);
const getFeedbackList = async() => {
  try {
    const { data } = await axios.get('/api/feedback/list',{
      headers: {
        'Authorization': `Bearer ${localStorage.getItem('token')}`,
      },
    })
    feedbacks.value = data.data
    console.log('反馈列表',feedbacks)
  } catch (e) {
    await Promise.reject(e)
  }
}
// 删除反馈的id
const deleteId = ref(0);
// 删除对话框状态
const deleteDialogVisible = ref(false);
//删除确认
const confirmDelete = async () => {
  await deleteFeedback(deleteId.value);
  deleteDialogVisible.value = false;
};
//删除反馈
const deleteFeedback = async(id) => {
  try {
    const { data } = await axios.delete(`/api/feedback/delete/${id}`)
    await getFeedbackList()
    ElMessage({
      message: data.message,
      type: 'warning',
    });
  } catch (e) {
    await Promise.reject(e)
  }
}
//受理反馈
const handlerFeedback = async(id) => {
  try {
    const { data } = await axios.get(`/api/feedback/handler/${id}`)
    console.log('受理返回',data)
    await getFeedbackList()
    ElMessage({
      message: data.message,
      type: 'success',
    });
  } catch (e) {
    await Promise.reject(e)
  }
}
onMounted(async() => {
  await getFeedbackList()
})
</script>
<style scoped>
.card {
  padding-top: 2%;
  width: 100%;
  height: 100%;
}
</style>